<template>
  <!-- 复选列表数据 -->
  <div class="manager-container">
    <div class="search">
      <!-- 搜索条件开始 -->
      <el-row :gutter="20">
        <!-- 工具条开始 -->
        <el-col :span="2">
          <el-button type="primary" @click="all" size="default">全部</el-button>
        </el-col>
        <el-col :span="2">
          <el-button @click="checkPending" size="default">待审核</el-button>
        </el-col>
        <el-col :span="2">
          <el-button @click="passed" size="default">已通过</el-button>
        </el-col>
        <el-col :span="2">
          <el-button @click="Refer" size="default">未通过</el-button>
        </el-col>
        <el-col :span="2">
          <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
          >全选</el-checkbox>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" :disabled="single" @click="handlePass" size="default">一键通过</el-button>
        </el-col>
        <el-col :span="2">
          <el-button  :disabled="multiple" @click="handleReject" size="default">一键拒绝</el-button>
        </el-col>
        <!-- 工具条结束 -->
      </el-row>
      <!-- 搜索条件结束 -->
    </div>
    <div class="table-list">
      <el-row :gutter="20" class="main-row">
        <!-- Tree控件开始 -->
        <el-col :span="3">
          <Tree @handle-node-click="handleNodeClick" title="资源目录" :treeList="treeList"/>
        </el-col>
        <!-- Tree控件结束 -->

        <!-- 列表开始 -->
        <el-col :span="15">
          <el-checkbox-group v-model="check" @change="handleCheckedCitiesChange" class="menu-group">
            <el-col :span="24" v-for="item in checkedList" :key="item.id" class="check-col">
              <el-checkbox :label="item.id" class="check-box">
                <el-row :gutter="20">
                  <el-col :span="4">
                    <span>
                      <img src="@/assets/images/pubLogo.png" alt>
                    </span>
                  </el-col>
                  <el-col :span="7">
                    <span>{{ item.label }}</span>
                  </el-col>
                  <el-col :span="7">
                    <span>{{ item.serviceName }}</span>
                  </el-col>
                  <el-col :span="6">
                    <div class="btnList">
                      <el-button  size="default" type="primary" @click="Pass(scope)">通过</el-button>
                      <el-button plain size="default"   @click="refuse(scope)">拒绝</el-button>
                      <el-button type="primary" size="default"  circle>
                        <i class="iconfont icon-zanting"></i>
                      </el-button>
                      <el-button type="info" size="default" plain circle>
                        <i class="iconfont icon-kaishi"></i>
                      </el-button>
                      <el-button  size="default" plain circle>
                        <i class="iconfont icon-guanbi"></i>
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
              </el-checkbox>
            </el-col>
          </el-checkbox-group>
          <Pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="pagination"
          />
        </el-col>
        <!-- 列表开始 -->

        <el-col :span="5.5" class="mapImg">
          <div class="map-default-container">
            <img src="@/assets/images/map.png" alt>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
//API接口
import api from "@/api";
//引入消息弹出框
import { ElMessage, ElMessageBox } from "element-plus";
//vite 替换require加载图片
import { loaderImg } from "@/utils/index.js";
//把数据格式化tree格式数据
import formatTree from "@/utils/formatTree";
//分页
import Pagination from "@/components/Pagination/index.vue";
//引入tree组件
import Tree from "@/components/Tree/Tree.vue";
export default {
  components: { Pagination, Tree },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: ""
        // dmStatus: '',
      },
      loading: true, //加载状态
      single: true,
      multiple: true, //按钮禁用状态
      total: 1, //总条目数
      checkAll: false, //全选状态
      isIndeterminate: false,
      check: [], //全选数据数据
      checkedList: [], //列表数据
      treeList: [],
      imgurlName: "../../assets/images/pubLogo.png"
    };
  },
  /**创建函数 */
  created() {
    //获取路由参数
    let params = this.$route.query;
    //动态获取路由参数的key值
    let keys = Object.keys(params).map(key => key);
    //取到动态获取的值
    let kay = keys[0];
    //赋值给变量
    this.queryParams[kay] = params[kay];
    //vite 替换require加载图片
  },
  /**挂载函数 */
  mounted() {
    
    // this.queryParams.dmStatus = this.$route.query.dmStatus
    //调用列表方法
    this.getList();
    //调用tree树数据方法
    this.getTreeList();
  },
  /**方法 */
  methods: {
    /**
     * 获取tree列表
     */
    getTreeList() {
      //调用列表查询接口
      api.assetCatalog
        .treeList()
        .then(res => {
          if (res.code) {
            this.treeList = formatTree(res.data, 0);
          }
        })
        .catch(err => {
          console.log(err,"报错==》");
          this.$message.error(err);
        });
    },
    /**
     * 复选方法
     */
    handleCheckAllChange(val) {
      let array = [];
      this.checkedList.map(item => {
        array.push(item.id);
        if (val === true) {
          this.check = val ? array : [];
        } else {
          this.check = val ? [] : [];
        }
      });
      this.isIndeterminate = false;
      this.single = !this.check.length;
      this.multiple = !this.check.length;
    },
    /**
     * 单选方法
     */
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.checkedList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.checkedList.length;
      this.single = !checkedCount;
      this.multiple = !checkedCount;
    },
    /**
     * 查询方法
     */
    handleQuery() {
      //设置默认进入第一页
      this.queryParams.pageNum = 1;
      //获取列表数据
      this.getList();
    },
    /**
     * 点击Tree节点
     * @param {Object} node
     */
    handleNodeClick(node) {
      //设置PID值
      this.queryParams.pid = node.id;
      //获取列表数据
      this.getList();
    },
    /**
     * 获取表格列表
     */
    getList() {
      //设置Loding状态
      this.loading = true;
      //调用列表查询接口
      api.assetCatalog.list(this.queryParams).then(res => {
        //判断返回状态
        if (res.code) {
          //设置列表数据
          this.checkedList = res.rows;
          //设置总条目数
          this.total = res.total;
        } else {
          this.$message.error(res.msg);
        }
        //loading结束
        this.loading = false;
      });
    },
    /** 全部 */
    all() {
      this.queryParams.pageNum = 1;
      this.getList((this.queryParams.dmStatus = ""));
    },
    /** 待审核 */
    checkPending() {
      this.queryParams.pageNum = 1;
      this.getList((this.queryParams.dmStatus = 1));
    },
    /** 已通过 */
    passed() {
      this.queryParams.pageNum = 1;
      this.getList((this.queryParams.dmStatus = 2));
    },
    /** 未通过 */
    Refer() {
      this.queryParams.pageNum = 1;
      this.getList((this.queryParams.dmStatus = 3));
    },
    /** 一键通过 */
    handlePass() {},
    /** 一键拒绝 */
    handleReject() {},
    /** 通过 */
    Pass() {},
    /**
     * 拒绝
     */
    refuse(row) {
      ElMessageBox.prompt("请输入拒绝理由?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        inputErrorMessage: "请输入拒绝理由"
      })
        .then(() => {
          ElMessage({
            type: "success",
            message: "拒绝成功"
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "拒绝失败"
          });
        });
    },
    //分页
    pagination({ page, limit }) {
      this.queryParams.pageNum = page;
      this.queryParams.pageSize = limit;
      this.getList();
    }
  }
};
</script>

<style lang="less" scoped>
.check-box {
  position: relative;
  display: flex;
  span {
    display: inline-block;
    width: 200px;
    margin-left: 20px;
    line-height: 2;
  }
}
.btnList {
  width: 100%;
  position: absolute;
  left: 600px;
}
</style>
